<template>
  <div class="layout-instruct">
    <h2>布局组成</h2>
    <span>布局中包含以下五种布局</span>
    <p>内容区域（Content)：通常用于放置主体内容</p>
    <p>顶部区域（Header)：位于页面顶部，通常用于放置顶部导航</p>
    <p>顶部区域（Sider)：位于主题内容两侧，通常用于放置侧边导航</p>
    <p>顶部区域（Footer)：位于页面底部，通常用于放置操作栏</p>
    <p>顶部区域（title)：位于页面内容区上面，通常用于放置标题</p>
  </div>
  <h2>分类布局</h2>
  <div class="type-module">
    <h3>上中下布局</h3>
    <e-layout class="layout" :style="{minHeight: '50vh',maxWidth:'50vw',maxHeight:'100vh'}">
      <e-header class="layout-header">Header</e-header>
      <e-layout>
        <e-layout>
          <e-title class="layout-title">Title</e-title>
          <e-content class="layout-content">
            Content<br/>
          </e-content>
        </e-layout>
        <e-footer class="layout-footer-center">Footer</e-footer>
      </e-layout>
    </e-layout>
    <div class="module_detail">
      <p>尺寸：顶部导航高度50px，标题栏高度60px</p>
      <p>横向：主内容区左右两边留白区域间距20px,主内容区域进行动态缩放</p>
      <p>纵向：顶部导航固定，底部操作栏固定</p>
    </div>
  </div>
  <div class="type-module">
    <h3>T型布局</h3>
    <e-layout class="layout" :style="{minHeight: '50vh',maxWidth:'50vw'}">
      <e-header class="layout-header">Header</e-header>
      <e-layout>
        <e-sider v-model="fold" :collapsedWidth="0"  class="layout-sider">Sider</e-sider>
        <e-layout>
          <e-title class="layout-title">Title</e-title>
          <e-content class="layout-content">Content</e-content>
        </e-layout>
      </e-layout>
    </e-layout>
    <div class="module_detail">
      <p>尺寸：顶部导航高度50px，左侧导航宽度180px,标题栏高度60px</p>
      <p>横向：左侧导航宽度固定，右侧主内容区间距固定20px,内容区域自动缩放，当浏览器视图（侧边区域+内容区域）小于1200px时出现滚动条</p>
      <p>纵向：顶部导航高度固定，标题高度固定60px</p>
    </div>
  </div>

  <div class="type-module">
    <h3>C型布局</h3>
    <e-layout class="layout" :style="{minHeight: '50vh',maxWidth:'50vw'}">
      <e-header class="layout-header">Header</e-header>
      <e-layout>
        <e-sider v-model="fold"  :collapsedWidth="0"  class="layout-sider">Sider</e-sider>
        <e-layout>
          <e-title class="layout-title">Title</e-title>
          <e-content class="layout-content">Content</e-content>
          <e-footer class="layout-footer-center">Footer</e-footer>
        </e-layout>
      </e-layout>
    </e-layout>
    <div class="module_detail">
      <p>尺寸：顶部导航高度50px，左侧导航宽度180px,标题栏高度60px</p>
      <p>横向：左侧导航宽度固定，右侧主内容区间距固定20px,内容区域自动缩放，当浏览器视图（侧边区域+内容区域）小于1200px时出现滚动条</p>
      <p>纵向：顶部导航高度固定，底部高度不固定，标题高度固定60px</p>
    </div>
  </div>

  <div class="type-module">
    <h3>π型布局</h3>
    <e-layout class="layout" :style="{minHeight: '50vh',maxWidth:'50vw'}">
      <e-header class="layout-header">Header</e-header>
      <e-layout>
        <e-sider v-model="fold"  :collapsedWidth="0" class="layout-sider">Sider</e-sider>
        <e-layout>
          <e-title class="layout-title">Title</e-title>
          <e-layout class="direction-row">
            <e-content class="layout-content">Content</e-content>
            <e-content class="layout-content-assist">Content2</e-content>
          </e-layout>
        </e-layout>
      </e-layout>
    </e-layout>
    <div class="module_detail">
      <p>尺寸：顶部导航高度50px，左侧导航宽度180px,标题栏高度60px</p>
      <p>横向：左侧导航宽度固定，右侧主内容区间距固定20px,内容区域自动缩放，当浏览器视图（侧边区域+内容区域）小于1200px时出现滚动条</p>
      <p>纵向：顶部导航高度固定，标题高度固定60px</p>
    </div>
  </div>

  <div class="type-module">
    <h3>可伸缩侧边导航</h3>
    <e-layout class="layout" :style="{minHeight: '50vh',maxWidth:'50vw'}">
      <e-header class="layout-header">Header</e-header>
      <e-layout>
        <e-sider v-model="fold" :hideTrigger="false" :collapsedWidth="0"  :collapsible="true" class="layout-sider">Sider</e-sider>
        <e-layout>
          <e-title class="layout-title">Title</e-title>
          <e-content class="layout-content">Content</e-content>
        </e-layout>
      </e-layout>
    </e-layout>
    <div class="module_detail">
      <p>尺寸：顶部导航高度50px，左侧导航宽度180px,标题栏高度60px</p>
      <p>横向：左侧导航宽度可缩放，右侧主内容区间距固定20px,内容区域自动缩放，当浏览器视图（侧边区域+内容区域）小于1200px时出现滚动条</p>
      <p>纵向：顶部导航高度固定，标题高度固定60px</p>
    </div>
  </div>

  <div class="type-module">
    <h3>自定义伸缩按钮</h3>
    <e-layout class="layout" :style="{minHeight: '50vh',maxWidth:'50vw'}">
      <e-header class="layout-header" @click="toggleSider">
        <div class="header-product-menu">
          <span class="header-nav">
            <span class="header-nav-middle"></span>
          </span>
        </div>
      </e-header>
      <e-layout>
        <e-sider  ref="sider" v-model="fold" :hideTrigger="false" :collapsedWidth="0"  :collapsible="true" class="layout-sider">Sider</e-sider>
        <e-layout>
          <e-title class="layout-title">Title</e-title>
          <e-content class="layout-content">Content</e-content>
        </e-layout>
      </e-layout>
    </e-layout>
    <div class="module_detail">
      <p>尺寸：顶部导航高度50px，左侧导航宽度180px,标题栏高度60px</p>
      <p>横向：左侧导航宽度可缩放，右侧主内容区间距固定20px,内容区域自动缩放，当浏览器视图（侧边区域+内容区域）小于1200px时出现滚动条</p>
      <p>纵向：顶部导航高度固定，标题高度固定60px</p>
    </div>
  </div>
  <layout-md class="markdown-body"></layout-md>

</template>

<script setup>
import layoutMd from '../../docs/layout.md';
import {ref} from 'vue'

let fold = ref(false)

let sider = ref(null)

function toggleSider(){
  sider.value.toggleCollapse()
}

</script>

<style scoped lang="less">
@color-complementary-1: #031129;  // 辅助色1
@color-functional-white: #FFFFFF;  // 白色
@color-brand-primary: #337DFF;  // 品牌色1

  .layout-instruct{
    margin:10px;
  }
  .layout-instruct h3{
    margin:15px;
  }
  .layout-instruct p{
    line-height:20px;
  }
  .type-module{
    margin-top:10px;
  }
  .type-module h5{
    margin:10px;
  }
  .module_detail{
    margin-top:20px;
    line-height:20px;
  }
  .layout{
    width:100%;
    min-width:1200px;
    overflow: auto;
  }
.layout-header {
    background: @color-complementary-1;
    color:@color-functional-white;
}

.layout-title,.layout-content{
  text-align:center;
}
.layout-content-assist{
  margin-left:0;
  text-align:center;
  flex:0 0 180px;
}
.layout-footer-center{
    text-align: center;
}

.direction-row{
  flex-direction: row;
}

.header-product-menu{
  margin:0 -50px;
  cursor: pointer;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  background: @color-brand-primary;
  overflow:hidden;
}

.header-nav {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 15px;
}

.header-nav-hover::before {
    width: 20px;
    transform: rotate(44deg);
}
.header-nav::before {
    content: '';
    background-color: @color-functional-white;
    width: 20px;
    height: 3px;
    position: absolute;
    top: 1px;
    left: 0px;
    transition: all ease .5s;
    transform-origin: 13% 100%;
}
.header-nav-hover::after {
    width: 20px;
    margin-top: -2px;
    transform: rotate(-43deg);
}
.header-nav::after {
    content: '';
    background-color: @color-functional-white;
    position: absolute;
    width: 20px;
    height: 3px;
    top: 15px;
    left: 0px;
    transition: all ease .5s;
    transform-origin: 6% 0%;
}

.header-nav-hover .header-nav-middle {
    width: 0;
}
.header-nav .header-nav-middle {
    background-color: @color-functional-white;
    position: absolute;
    width: 20px;
    height: 3px;
    top: 8px;
    left: 0px;
    transition: all ease 0.2s;
}
</style>
